<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>优享共创首页</title>
    <link rel="stylesheet" href="${base}/layui/css/layui.css">
    <link rel="stylesheet" href="${base}/awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="${base}/css/admin.css">
    <link rel="stylesheet" href="${base}/wang/wangeditor.css">
    <style>
	
    	.hide {display: none;}
    	.checkbox{display: inline-block;}
    	.layui-form-item{font-size: 18px;}
    	.discuss{ float: left;margin-left: 30px;padding-top: 6px;}
    	.discuss p{text-align: left; font-size: 13px;margin-top: 5px;padding-top: 2px;}
    	.discuss_img{ float: left;margin-left: 10px;margin-top: 5px;}
     	.img {vertical-align: top;}
     	.content{width: calc(100% - 22px); margin-left: 16px;margin-right: 6px;}
     	.title{float: left;margin-top: 30px;width: 100%;margin-bottom: 10px;}
     	.subtitle{color: #4A4A4A;float: left;font-size: 28px;display: inline-block; font-weight: 600;color:rgba(74,74,74,1);} 
     	.subintro{color: #000000;font-size: 16px;display: inline-block;float: right;margin-top: 10px;margin-right: 10px;font-weight:400;color:rgba(0,0,0,0.48);}
     	ul.city{width: 100%;float: left;height:24px;}
     	ul.city li{width: 19.8%;float: left;margin: 0px;color:rgba(74,74,74,1);text-align: center;font-size: 18px;padding-top: 6px;}
     	ul.city li.select{background:rgba(42,203,144,0.2);border-radius:2px;border:1px solid rgba(54,173,0,0);color:rgba(42,203,144,1);}
     	.line{float: left;width: 100%;}
     	ul.course_list{width: 100%;float: left;margin-top: 20px;margin-bottom: 20px;}
     	ul.course_list li{width: 49.8%;float: left;text-align: left;margin-bottom: 10px;}
     	ul.course_list li .org{font-weight:600;color:rgba(189,148,94,1);line-height:14px;margin-top: 3px;}
     	ul.course_list li .title{font-weight:500;color:rgba(74,74,74,1);line-height:16px;margin-top: 3px;}
     	ul.course_list li .price{font-weight:600;color:rgba(42,203,144,1);display: inline-block;    float: left;}
     	ul.course_list li .hour{font-weight:600;color:rgba(122,122,122,1);line-height:13px;display: inline-block; float: right;margin-right: 8px;}
     	ul.course_list li .star {margin-top: 10px;float: left;}
     	ul.course_list li .ke{font-weight:600;color:rgba(42,203,144,1);}
     	ul.course_list li .zan{font-weight:400;color:rgba(122,122,122,1);font-size: 12px;line-height:9px;display: inline-block; float: right;margin-right: 8px;margin-top: 14px;}
     	.fa-star {color: #2ACB90;font-size: 12px;transform: scale(0.6);}
     	.more{background:rgba(255,255,255,1);border-radius:4px;border:1px solid rgba(42,203,144,1); width: 100%;color: #2ACB90;height:28px;float: left;text-align: center;padding-top: 6px;}
     	
     	ul.teacher_list{width: 100%;float: left;margin-top: 20px;margin-bottom: 20px;}
     	ul.teacher_list img { width:90px;height:90px;background:rgba(137,141,136,1); border-radius:14px;    position: absolute; z-index: 2;}
     	ul.teacher_list .body{ background:rgba(255,255,255,1);box-shadow:0px 2px 4px 0px rgba(193,193,193,0.5);border-radius:14px;border:1px solid rgba(239,239,239,1);}
    </style>
</head>
<body  class="layui-layout-body" >
<div class="layui-carousel" id="test1" lay-filter="test1" style="display: none;">
  <div carousel-item="">
  	<#list banner_list as one>
  	<div><img alt="${one.title}" src="${one.pic}?imageView2/2/w/400"></div>
  	</#list>
  </div>
</div> 
<div class="content">
	<div class="title">
		<div class="subtitle">优享课程</div><div class="subintro">${course_slogan}</div>
	</div>
	<ul class="city">
		<li class="select">苏州</li><li>上海</li><li>杭州</li><li>无锡</li><li>南京</li>
	</ul>
	<ul class="course_list" style="display: none;">
	<#list course_list as one>
		<li>
			<img src="${one.cover}" height="92" />
			<p class="org">${one.org_name}</p>
			<p class="title">${one.title}</p>
			<div class="line">
				<div class="price">${one.price}U币</div><div class="hour">${one.hour}节课</div>
			</div>
			<div class="line">
				<div class="star"><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span></div>
				<div class="zan">${one.zan}超赞课程</div>
			</div>
		</li>
	</#list>
	</ul>
	<div class="more">更多课程</div>
	<div class="title">
		<div class="subtitle">优享老师</div><div class="subintro">${teacher_slogan}</div>
	</div>
	<ul class="teacher_list" >
	<#list teacher_list as one>
	<li>
		<img class="img" src="${one.user_header}"  width="90" height="90"/>
		<div class="body">
			<p>${one.nick_name} ${one.city} ${one.teacher}
				<div class="star"><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span></div>
				<div class="zan">${one.zan}超赞课程</div>  
			</p>
			<p>${one.intro}</p>
		</div>
	</li>
	</#list>
	</ul>
</div>

<script src="${base}/js/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="${base}/layui/layui.all.js"></script>
<script src="${base}/laydate/laydate.js"></script>
<script type="text/javascript">
layui.use(['carousel', 'form'], function(){
	  var carousel = layui.carousel
	  ,form = layui.form;
	  carousel.render({
	    elem: '#test1'
	    ,arrow: 'always'
	    ,width: '100%'
	    ,height: '294px'
	    , arrow: 'none' 
	  });
});
</script>
</html>